@import "@{root-path}/base/mixins.less";
@import "@{root-path}/base/variables.less";

.panel {
    color: @black;
    .shadow(0px, 1px, 4px, 0, @grey-90-a10);

    .content & {
        .shadow-none();
    }

    .title {
        background: @tan repeat-x left top;
        display: flex;
        font-size: 12px;
        padding: 1em;

        h2 {
            display: block;
            font-size: 16px;
            font-weight: bold;
            padding-right: 0.8em;
            margin: 0;
            flex-grow: 1;
        }

        .choices {
            border-left-color: @grey;
            vertical-align: 1px;
        }
        a {
            color: @black;
            &:hover,
            &:focus {
                background: @light-grey;
            }

            &.selected {
                background-color: @primary-medium;
                color: @white;
            }
        }
    }
    .body {
        background: @white;
        padding: 1em;
        min-height: 4em;
    }
    .table {
        font-size: 10px;
        border-collapse: collapse;
        border: 1px solid @grey;
        border-top: 0;
        width: 100%;
        td,
        th {
            padding: .5em .5em;
            vertical-align: top;
        }
        .numalign {
            text-align: right;
        }
        .spanalign {
            text-align: center;
        }
        .trend-up {
            color: @red;
        }
        .trend-down {
            color: @green;
        }
        thead {
            tr {
                background: @tan;
            }
            th {
                border: 1px solid @grey;
                border-top: 0;
                font-weight: bold;
            }
            th.sortable {
                padding-right: 17px;
            }
            th.sortable:hover {
                cursor: pointer;
            }
        }
        tbody {
            background-color: @white;
            tr {
                td:first-child,
                th:first-child {
                    border-left: 0;
                }
            }
            tr:nth-child(even) {
                background: @white;
            }
            tr:hover {
                background: @off-white;
            }
            td,
            th {
                border-left: 1px dotted @off-white;
                border-top: 1px solid @off-white;
            }
            tr:first-child {
                td,
                th {
                    border-top: 0;
                }
            }
            td.separated,
            th.separated {
                border-left: 1px solid @grey;
            }
            th {
                font-weight: bold;
            }
        }
        td.count {
            span {
                display: block;
                font-size: 8px;
            }
        }
        td.count-high {
            color: @red;
        }
        td.count-none {
            color: @dark-grey;
        }
    }
    .table.expand-counts {
        .counts-collapsed,
        .counts-expanded {
            display: none;
        }
    }
}
